<template>
  <button
    :class="buttonClass"
    :disabled="disabled || loading"
    :type="nativeType"
    @click="handleClick"
  >
    <van-loading
      v-if="loading"
      :size="loadingSize"
      :color="loadingColor"
      class="base-button__loading"
    />
    <slot v-if="!loading" />
  </button>
</template>

<script>
import { computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'BaseButton',
  props: {
    /**
     * 按钮类型
     */
    type: {
      type: String,
      default: 'default',
      validator: (value) => ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
    },
    /**
     * 按钮尺寸
     */
    size: {
      type: String,
      default: 'normal',
      validator: (value) => ['large', 'normal', 'small', 'mini'].includes(value)
    },
    /**
     * 是否为朴素按钮
     */
    plain: {
      type: Boolean,
      default: false
    },
    /**
     * 是否为圆形按钮
     */
    round: {
      type: Boolean,
      default: false
    },
    /**
     * 是否为方形按钮
     */
    square: {
      type: Boolean,
      default: false
    },
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示加载状态
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 加载图标大小
     */
    loadingSize: {
      type: String,
      default: '20px'
    },
    /**
     * 原生按钮类型
     */
    nativeType: {
      type: String,
      default: 'button',
      validator: (value) => ['button', 'submit', 'reset'].includes(value)
    },
    /**
     * 是否为块级按钮
     */
    block: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    /**
     * 按钮样式类
     */
    const buttonClass = computed(() => {
      const classes = ['base-button']
      
      // 类型
      classes.push(`base-button--${props.type}`)
      
      // 尺寸
      classes.push(`base-button--${props.size}`)
      
      // 状态
      if (props.plain) classes.push('base-button--plain')
      if (props.round) classes.push('base-button--round')
      if (props.square) classes.push('base-button--square')
      if (props.disabled) classes.push('base-button--disabled')
      if (props.loading) classes.push('base-button--loading')
      if (props.block) classes.push('base-button--block')
      
      return classes
    })

    /**
     * 加载图标颜色
     */
    const loadingColor = computed(() => {
      if (props.plain) {
        return `var(--base-button-${props.type}-color)`
      }
      return props.type === 'default' ? '#c8c9cc' : '#fff'
    })

    /**
     * 点击事件处理
     */
    const handleClick = (event) => {
      if (!props.disabled && !props.loading) {
        emit('click', event)
      }
    }

    return {
      buttonClass,
      loadingColor,
      handleClick
    }
  }
})
</script>

<style lang="scss" scoped>
.base-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
  border: 1px solid transparent;
  background: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;

  &:active {
    opacity: 0.7;
  }

  &--loading {
    cursor: default;
  }

  &--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &--block {
    display: flex;
    width: 100%;
  }

  &--round {
    border-radius: 999px;
  }

  &--square {
    border-radius: 0;
  }

  // 尺寸
  &--large {
    width: 100%;
    height: 50px;
  }

  &--normal {
    padding: 0 15px;
    font-size: 14px;
  }

  &--small {
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  &--mini {
    height: 24px;
    padding: 0 4px;
    font-size: 10px;
  }

  // 类型样式
  &--default {
    color: #646566;
    background-color: #fff;
    border-color: #ebedf0;

    &.base-button--plain {
      background-color: #fff;
    }
  }

  &--primary {
    color: #fff;
    background-color: #1989fa;
    border-color: #1989fa;

    &.base-button--plain {
      color: #1989fa;
      background-color: #fff;
    }
  }

  &--success {
    color: #fff;
    background-color: #07c160;
    border-color: #07c160;

    &.base-button--plain {
      color: #07c160;
      background-color: #fff;
    }
  }

  &--danger {
    color: #fff;
    background-color: #ee0a24;
    border-color: #ee0a24;

    &.base-button--plain {
      color: #ee0a24;
      background-color: #fff;
    }
  }

  &--warning {
    color: #fff;
    background-color: #ff976a;
    border-color: #ff976a;

    &.base-button--plain {
      color: #ff976a;
      background-color: #fff;
    }
  }

  &--info {
    color: #fff;
    background-color: #909399;
    border-color: #909399;

    &.base-button--plain {
      color: #909399;
      background-color: #fff;
    }
  }

  &__loading {
    margin-right: 4px;
  }
}

// CSS变量定义
:root {
  --base-button-default-color: #646566;
  --base-button-primary-color: #1989fa;
  --base-button-success-color: #07c160;
  --base-button-danger-color: #ee0a24;
  --base-button-warning-color: #ff976a;
  --base-button-info-color: #909399;
}
</style>